<template>
    <div class="gray">
        <search></search>
        <div class="title">
            <img src="@/assets/xie.png" width="100%" height="145">
            <div class="minute">
                <p class="lute">{{list.name}}</p>
            </div>
        </div>
        <div class="info">
            {{list.simple_desc}}
        </div>
         <ul>
            <li v-for="item in goodsList" :key="item.id">
                <img :src="item.list_pic_url" width="151" height="151">
                <p>{{item.name}}</p>
                <p>￥{{item.retail_price}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import search from "@/components/search"
import { detailaction } from "@/api/home/index.js"
export default {
    data() {
        return {
            list:[],
            goodsList:[]
        };
    },
    methods: {
        init(){
            var id = this.$route.query.ids;
            detailaction({id}).then(res=>{
                console.log(res);
                this.list = res.data.data;
                this.goodsList = res.data.goodsList
            })
        }
    },
    created() {
        this.init();
    },
    computed: {

    },
    mounted() {

    },
    components:{
        search
    }
};
</script>

<style scoped lang="scss">
.gray{
    background-color: rgb(244,244,244);
}
    .minute{
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        .lute{
            font-size: .50667rem;
            color: #fff;
            border-bottom: .06667rem solid #fff;
            padding: .06667rem;
        }
    }
   .title{
       width: 100%;
       height: 145px;
       position: relative;
   }
   .info{
       padding: 21px 16px;
       color: #666;
       font-size: .4rem;
       background-color: #fff;
   }
   ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 10px;
        li{
            width: 49.5%;
            margin-bottom:1% ;
            background-color: #fff;
            p:last-child{
                font-size: .4rem;
                color: #b4282d;
            }
        }
    }
</style>
